<template>
  <div class="app-container">
    <!-- 仓库档案 -->

    <el-row :gutter="24">
      <el-col :lg="12" :xs="12">
        <div class="search-bar">
          <!-- 搜索 -->
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-row>
              <el-col :span="8">
                <el-form-item label="仓库名称" prop="name">
                  <el-input
                    v-noSpace
                    v-model="queryParams.name"
                    placeholder="请输入仓库名称"
                    class="!w-[192px]"
                    clearable
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="仓库编号" prop="code">
                  <el-input
                    v-noSpace
                    v-model="queryParams.code"
                    placeholder="请输入仓库编号"
                    class="!w-[192px]"
                    clearable
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="默认仓库" prop="isDefault">
                  <el-select
                    v-model="queryParams.isDefault"
                    placeholder="全部"
                    clearable
                    class="!w-[192px]"
                  >
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
              <el-button
                type="warning"
                icon="menu"
                v-hasPerm="'sys:wareArchives:edit'"
                @click="handleOpenDialog({}, 'add')"
              >
                新增
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 仓库列表 -->
        <el-card shadow="never">
          <el-table
            v-loading="loading"
            show-overflow-tooltip
            :tooltip-formatter="tableRowFormatter"
            :data="pageData"
            :height="500"
            @row-click="handClikRow"
          >
            <el-table-column label="仓库编号" align="center" prop="code" />
            <el-table-column label="仓库名称" align="center" prop="name" width="150" />
            <!-- <el-table-column label="仓库类型" align="center" prop="warehouseCode" width="150">
              <template #default="scope">
                <div>{{ getProductType(scope.row.warehouseCode) }}</div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="使用情况" align="center" prop="utilizationRate" width="150">
              <template #default="scope">
                <div>
                  {{ utilizationRateFormat(scope.row.capacityTotal, scope.row.capacityUsed) }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="别名" align="center" prop="otherName" width="150" />
            <el-table-column label="客户编号" align="center" prop="customer" />
            <el-table-column label="客户地址名称" align="center" prop="addressName" width="150" />
            <el-table-column label="地址" align="center" prop="address" /> -->
            <el-table-column label="是否为默认仓库" align="center" prop="isDefault" width="150">
              <template #default="scope">
                <span v-if="scope.row.isDefault == '0'">{{ "否" }}</span>
                <span v-if="scope.row.isDefault == '1'">{{ "是" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人/联系人电话" align="center" prop="contactPerson">
              <template #default="scope">
                <div>{{ scope.row.contactPerson + "/" + scope.row.contactTel }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="联系人电话" align="center" prop="contactTel" width="150" /> -->
            <!-- <el-table-column label="联系人传真" align="center" prop="contactFax" width="150" />
            <el-table-column label="联系人邮箱" align="center" prop="contactEmail" width="150" />
            <el-table-column label="可存量" align="center" prop="capacity" width="150" />
            <el-table-column label="已存量" align="center" prop="capacity" width="150" /> -->

            <el-table-column label="操作" fixed="right" width="150" align="center">
              <template #default="scope">
                <!-- <el-button
                  type="primary"
                  link
                  size="small"
                  @click="handleOpenDialog(scope.row, 'edit')"
                >
                  修改
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  link
                  @click="handleOpenDialog(scope.row, 'del')"
                >
                  删除
                </el-button> -->
                <el-button
                  type="primary"
                  link
                  size="small"
                  @click.stop="handleOpenDialog(scope.row, 'info')"
                >
                  查看
                </el-button>
                <el-button
                  v-hasPerm="'sys:wareArchives:edit'"
                  type="primary"
                  link
                  size="small"
                  @click.stop="handleOpenDialog(scope.row, 'edit')"
                >
                  编辑
                </el-button>
                <el-button
                  v-hasPerm="'sys:wareArchives:del'"
                  type="danger"
                  size="small"
                  link
                  @click.stop="stashDel(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>

      <el-col :lg="12" :xs="12">
        <el-card shadow="never">
          <!-- <el-button type="warning" icon="menu" @click="addRowDialog({}, 'add')">新增</el-button> -->

          <div class="flex-items-center flex">
            <div class="flex flex-items-center">
              <span class="mr-2">储位编号</span>
              <el-input
                v-noSpace
                v-model="rowParams.code"
                class="!w-[192px]"
                placeholder="请输入储位编号"
                clearable
                @keyup.enter="getRowPage"
              />
            </div>

            <el-button class="ml-2" type="primary" icon="search" @click="getRowPage">
              搜索
            </el-button>
            <el-button
              v-hasPerm="'sys:wareArchives:location:edit'"
              :disabled="stashId ? false : true"
              type="warning"
              icon="menu"
              @click="addRowDialog({}, 'add')"
            >
              新增
            </el-button>
          </div>

          <el-table
            v-loading="loading"
            show-overflow-tooltip
            :tooltip-formatter="tableRowFormatter"
            :data="rowData"
            :height="650"
          >
            <el-table-column label="储位编号" align="center" width="200" prop="code" />
            <el-table-column label="仓库编号" align="center" prop="warehouse" />
            <el-table-column label="使用情况" align="center" prop="utilizationRate">
              <template #default="scope">
                <div>
                  {{ scope.row.capacityUsed > 0 ? "使用" : "未使用" }}
                  <!-- {{ utilizationRateFormat(scope.row.capacity, scope.row.capacityUsed) }} -->
                </div>
              </template>
            </el-table-column>
            <el-table-column label="储位容量(kg)" align="center" prop="capacity" />
            <el-table-column label="存储品类" align="center" width="150" prop="category" />
            <!-- <el-table-column label="货物品类" align="center" prop="addressName" /> -->
            <el-table-column label="操作" fixed="right" width="100" align="center">
              <template #default="scope">
                <el-button
                  v-hasPerm="'sys:wareArchives:location:edit'"
                  type="primary"
                  link
                  size="small"
                  @click="addRowDialog(scope.row, 'edit')"
                >
                  修改
                </el-button>
                <el-button
                  v-hasPerm="'sys:wareArchives:location:del'"
                  type="danger"
                  size="small"
                  link
                  @click="storageLocationDel(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增/修改弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="1000px"
      @close="handleCloseDialog"
    >
      <el-form
        ref="roleFormRef"
        :disabled="dialog.type == 'info' ? true : false"
        :model="dialogFormData"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="name">
              <el-input
                v-noSpace
                v-model="dialogFormData.name"
                :maxlength="50"
                placeholder="请输入仓库名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库类型" prop="warehouseCode">
              <el-select
                v-model="dialogFormData.warehouseCode"
                placeholder="请输入仓库类型"
                style="width: 250px"
                filterable
              >
                <el-option
                  v-for="item in productList"
                  :key="item.codeValue"
                  :label="item.codeName"
                  :value="item.codeValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库温度" prop="category">
              <el-select
                v-model="dialogFormData.category"
                placeholder="请输入仓库温度"
                style="width: 250px"
                filterable
              >
                <el-option
                  v-for="item in temperature"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="别名" prop="otherName">
              <el-input
                v-noSpace
                v-model="dialogFormData.otherName"
                :maxlength="50"
                placeholder="请输入别名"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户编号" prop="customer">
              <el-input v-noSpace v-model="dialogFormData.customer" placeholder="请输入客户编号" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户地址名称" prop="addressName">
              <el-input
                v-noSpace
                v-model="dialogFormData.addressName"
                placeholder="请输入客户地址名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input
                v-noSpace
                v-model="dialogFormData.address"
                :maxlength="100"
                placeholder="请输入地址"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input
                v-noSpace
                v-model="dialogFormData.contactPerson"
                :maxlength="50"
                placeholder="请输入联系人"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人电话" prop="contactTel">
              <el-input
                v-noSpace
                v-model="dialogFormData.contactTel"
                :maxlength="11"
                placeholder="请输入联系人电话"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人传真" prop="contactFax">
              <el-input
                v-noSpace
                v-model="dialogFormData.contactFax"
                placeholder="请输入联系人传真"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input
                v-noSpace
                v-model="dialogFormData.contactEmail"
                placeholder="请输入联系人邮箱"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="默认仓库" prop="isDefault">
              <el-radio-group v-model="dialogFormData.isDefault">
                <el-radio :value="1" size="large">是</el-radio>
                <el-radio :value="0" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button
            v-if="dialog.type == 'info' ? false : true"
            v-debounce="handleSubmitList"
            type="primary"
          >
            提 交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- ROW新增/修改弹窗 todo:列表表头增加报存按钮，列表row可以直接编辑-->
    <el-dialog
      v-model="rowDialog.visible"
      :title="rowDialog.title"
      width="1000px"
      @close="handleCloseRowDialog"
    >
      <el-form ref="roleFormRef" :model="dialogRowFormData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="储位--行" prop="locRow">
              <el-input
                v-noSpace
                v-model="dialogRowFormData.locRow"
                :maxlength="6"
                :disabled="rowDialog.type == 'edit' ? true : false"
                placeholder="请输入储位--行"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储位--列" prop="locColumn">
              <el-input
                v-noSpace
                v-model="dialogRowFormData.locColumn"
                :maxlength="6"
                :disabled="rowDialog.type == 'edit' ? true : false"
                placeholder="请输入储位--列"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储位--层" prop="locFloor">
              <el-input
                v-noSpace
                v-model="dialogRowFormData.locFloor"
                :maxlength="6"
                :disabled="rowDialog.type == 'edit' ? true : false"
                placeholder="请输入储位--层"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="距离优先级" prop="distance">
              <el-input-number
                v-model.number="dialogRowFormData.distance"
                :controls="false"
                style="width: 100%; text-align: left"
                :max="1000"
                :min="0"
                placeholder="请输入距离优先级"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存储品类" prop="category">
              <el-input
                v-noSpace
                v-model="dialogRowFormData.category"
                placeholder="请输入存储品类"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="容量" prop="capacity">
              <el-input
                v-noSpace
                v-model.number="dialogRowFormData.capacity"
                placeholder="请输入容量"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button v-debounce="handleSubmit" type="primary">提 交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      v-model="dialogDel.visible"
      title="删除确认"
      width="500px"
      @close="handleClosedialogDel"
    >
      <p>删除后数据将不可显示，且本条库存数据清空，确认是否继续？</p>

      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button type="primary" @click="handleDel">确 定</el-button>
          <el-button @click="dialogDel.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- row删除 -->
    <el-dialog
      v-model="dialogRowDel.visible"
      :title="dialogRowDel.title"
      width="500px"
      @close="handleClosedialogDel"
    >
      <p>删除后数据将不可显示，且本条库存数据清空，确认是否继续？</p>

      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button type="primary" @click="handleRowDel()">确 定</el-button>
          <el-button @click="dialogRowDel.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import wareArchivesApi, {
  wareArchivesPageQuery,
  wareArchivesPageVO,
  StashForm,
  StorageLocationForm,
} from "@/api/warehouseManage/wareArchives";
import { tableRowFormatter, validatePositiveInteger } from "@/utils/index";
import configApi, { ConfigType } from "@/api/config/config";

// 新增弹窗
const dialog = reactive({
  title: "",
  visible: false,
  type: "",
});

// 新增弹窗
const rowDialog = reactive({
  title: "",
  visible: false,
  type: "",
});

// 新增弹窗
const dialogPro = reactive({
  title: "",
  visible: false,
});

//// 删除弹窗
const dialogDel = reactive({
  title: "",
  visible: false,
});

//// 删除弹窗
const dialogRowDel = reactive({
  title: "",
  visible: false,
});
// 温度配置
const temperature = ref([
  {
    name: "高温库0+",
    value: 1,
  },
  {
    name: "低温库-20",
    value: 2,
  },
  {
    name: "超低温-40",
    value: 3,
  },
  {
    name: "气调库",
    value: 4,
  },
]);

defineOptions({
  name: "User",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm);

const queryParams = reactive<wareArchivesPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

const rowParams = reactive({
  code: "", // 储位编号
  warehouse: "", // 仓库编号
});

const pageData = ref<wareArchivesPageVO[]>();

const rowData = ref<rowWareArchivesVO[]>();

interface rowWareArchivesVO {
  /** 储位编号 */
  code?: string;
  /** 仓库编号 */
  warehouse?: string;
  /** 存储品类 */
  // otherName?: string;
  /** 储位的品类 */
  // customer?: string;
  /** 货物品类 */
  // addressName?: string;
}
//产品列表 potato carrot beef
const productList = ref<
  {
    codeName: string;
    codeValue: string;
  }[]
>([]);
const getProductName = () => {
  configApi.getConfigListByType(ConfigType.WAREHOUSE_CODE).then((res) => {
    productList.value = res;
    console.log(productList);
  });
};
const getProductType = (type: string) => {
  let name = productList.value.find((item) => item.codeValue == type);
  return name?.codeName || "";
};
const utilizationRateFormat = (capacityTotal: number, capacityUsed: number) => {
  let percentage;
  let num = capacityUsed / capacityTotal;
  percentage = (num * 100).toFixed(2) + "%";
  if (isNaN(num)) percentage = "0%";
  return percentage;
};
const loading = ref(false);

// 仓库Form
const dialogFormData: StashForm = reactive({
  isDefault: 0,
  contactTel: "",
  contactPerson: "",
});
// 仓库ID用于删除
const stashId = ref("");
// 仓库删除弹窗
const stashDel = (id: any) => {
  stashId.value = id;
  dialogDel.visible = true;
};
// 储位Id用于删除
const storageLocationID = ref("");
// 储位删除弹窗
const storageLocationDel = (id: any) => {
  storageLocationID.value = id;
  dialogRowDel.visible = true;
};
// 储位Form
const dialogRowFormData: StorageLocationForm = reactive({});

const rules = reactive({
  name: [{ required: true, message: "仓库名称不能为空", trigger: "blur" }],
  warehouseCode: [{ required: true, message: "仓库类型不能为空", trigger: "blur" }],
  // category: [{ required: true, message: "仓库温度不能为空", trigger: "blur" }],
  locRow: [{ required: true, validator: validatePositiveInteger, trigger: "blur" }],
  locColumn: [{ required: true, validator: validatePositiveInteger, trigger: "blur" }],
  locFloor: [{ required: true, validator: validatePositiveInteger, trigger: "blur" }],
  distance: [{ required: true, message: "距离优先级不能为空", trigger: "blur" }],
});
const total = ref(0);
// 查询
function handleQuery() {
  loading.value = true;
  console.log("queryParams", queryParams);
  wareArchivesApi
    .getPage(queryParams)
    .then((data) => {
      pageData.value = [...(data?.list as any)];
      console.log("data", data);
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
const getRowPage = () => {
  console.log(rowParams);
  wareArchivesApi
    .getRowPage(rowParams)
    .then((response: any) => {
      console.log("response", response);
      if (!response) {
        rowData.value = [];

        ElMessage.error("暂无数据");
        return;
      }

      rowData.value = response; // 假设 API 返回的数据结构中有 data 字段
      console.log("获取的数据:", rowData.value);
    })
    .catch((error) => {
      rowData.value = [];

      ElMessage.error("未找到对应仓库的储位信息");
    })
    .finally(() => {
      loading.value = false;
    });
};
function handClikRow(row: any) {
  stashId.value = row.code;

  loading.value = true;
  rowParams.warehouse = row.code;
  getRowPage();
}

// 重置查询
function handleResetQuery() {
  console.log(queryFormRef);
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  // queryParams.deptId = undefined;
  // queryParams.createTime = undefined;
  handleQuery();
}

// 新增/修改
function handleOpenDialog(row: wareArchivesPageVO | null = null, type: string) {
  let upData = {};
  dialog.type = type;
  dialog.visible = true;
  if (type == "add") {
    console.log("add");
    dialog.title = "新增";
    delete dialogFormData.code;
    delete dialogFormData.id;
  } else if (type == "edit") {
    upData = { ...row };
    nextTick(() => {
      Object.assign(dialogFormData, upData);
    });

    dialog.title = "修改";
  } else {
    upData = { ...row };
    nextTick(() => {
      Object.assign(dialogFormData, upData);
    });
    dialog.title = "查看";
  }
}

function clearFormData() {
  // let data = {
  //   code: "",
  //   name: "",
  //   assetId: "",
  //   otherName: "",
  //   customer: "",
  //   addressName: "",
  //   address: "",
  //   contactPerson: "",
  //   contactTel: "",
  //   contactFax: "",
  //   contactEmail: "",
  //   isDefault: 0,
  //   warehouseCode: "",
  // };
  // Object.assign(dialogFormData, data);
}

// 储位新增修改
function addRowDialog(row: rowWareArchivesVO | null = null, type: string) {
  let upData = {};
  rowDialog.type = type;
  rowDialog.visible = true;
  if (type == "add") {
    rowDialog.title = "新增储位";
    delete dialogRowFormData.code;
    delete dialogRowFormData.id;
    delete dialogRowFormData.warehouse;
  } else if (type == "edit") {
    rowDialog.title = "编辑储位";
    upData = { ...row };
    nextTick(() => {
      Object.assign(dialogRowFormData, upData);
    });
  }
}

// 确认删除仓库
function handleDel() {
  dialogDel.visible = true;
  wareArchivesApi
    .delStore({ id: stashId.value })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      handleQuery();
      dialogDel.visible = false;
    })
    .catch((err) => {
      // ElMessage.error(`${err}`);
    });
}

//删除储位
function handleRowDel() {
  dialogRowDel.visible = true;
  wareArchivesApi.delLocation({ id: storageLocationID.value }).then(() => {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    handClikRow({ code: stashId.value });
    dialogRowDel.visible = false;
  });
}
// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  roleFormRef.value?.resetFields();
  nextTick(() => {
    roleFormRef.value?.clearValidate();
  });
  // dialogFormData: StashForm = reactive({})
  console.log(dialogFormData);
}

// 关闭弹窗
function handleCloseRowDialog() {
  rowDialog.visible = false;
  // roleFormRef
  roleFormRef.value?.resetFields();
  nextTick(() => {
    roleFormRef.value?.clearValidate();
  });
}

function handleClosedialogDel() {
  dialogDel.visible = false;
}

// 提交row
function handleSubmit() {
  console.log(dialogRowFormData);
  roleFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return;
    }

    console.log(rowDialog.type === "add");
    dialogRowFormData.warehouse = stashId.value;
    const apiCall =
      rowDialog.type === "add" ? wareArchivesApi.addLocation : wareArchivesApi.editLocation;

    apiCall(dialogRowFormData)
      .then(() => {
        ElMessage({
          // 提交成功的处理逻辑提取到此处
          type: "success",
          message: "提交成功",
        });
        rowDialog.visible = false;
        handClikRow({ code: stashId.value });
      })
      .catch((error) => {
        // 添加catch以处理API调用过程中可能出现的异常
        // console.error(error, "555"); // 在控制台输出错误信息，便于调试
        // ElMessage({
        //   type: "error",
        //   message: "发生未知错误，请稍后再试。", // 告知用户发生了未知错误
        // });
      });
  });
}
const roleFormRef = ref(ElForm);
// 提交
function handleSubmitList() {
  console.log(dialogFormData, "dialogFormData");
  roleFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    const apiCall = dialog.type === "add" ? wareArchivesApi.addStore : wareArchivesApi.editStore;
    if (dialog.type === "add") {
      // dialogFormData.id = "";
    }
    apiCall(dialogFormData)
      .then(() => {
        ElMessage({
          // 提交成功的处理逻辑提取到此处
          type: "success",
          message: "提交成功",
        });
        dialog.visible = false;
        clearFormData();
        handleQuery();
      })
      .catch((error) => {
        // 添加catch以处理API调用过程中可能出现的异常
        console.error(error, "222"); // 在控制台输出错误信息，便于调试
        ElMessage({
          type: "error",
          message: error, // 告知用户发生了未知错误
        });
      });
  });
}

onMounted(() => {
  handleQuery();
  getProductName();
});
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;

:deep(.el-input-number) {
  .el-input__inner {
    text-align: left;
  }
}

:deep(.el-input-number.is-without-controls .el-input__wrapper) {
  padding: 1px 11px;
}
</style>
